<template>
  <view class="course-container">
    <!-- 自定义导航栏 -->
    <view class="custom-navbar">
      <view class="navbar-content">
        <text class="navbar-title">课程中心</text>
        <text class="navbar-subtitle">治愈心灵的音频课程</text>
      </view>
    </view>

    <!-- 分类标签 -->
    <view class="category-tabs">
      <view 
        class="tab-item" 
        v-for="category in categories" 
        :key="category.id"
        :class="{ active: activeCategory === category.id }"
        @tap="switchCategory(category.id)"
      >
        <text class="tab-text">{{ category.name }}</text>
      </view>
    </view>

    <!-- 课程列表 -->
    <scroll-view scroll-y class="course-list">
      <view class="course-card" v-for="course in filteredCourses" :key="course.id" @tap="playCourse(course)">
        <view class="course-cover">
          <image :src="course.cover" class="cover-image" mode="aspectFill"></image>
          <view class="play-btn">
            <text class="iconfont icon-play"></text>
          </view>
          <view class="course-duration">{{ course.duration }}</view>
        </view>
        <view class="course-info">
          <view class="course-title">{{ course.title }}</view>
          <view class="course-desc">{{ course.description }}</view>
          <view class="course-meta">
            <text class="course-category">{{ course.categoryName }}</text>
            <text class="course-plays">{{ course.plays }}次播放</text>
          </view>
        </view>
        <view class="course-action">
          <view class="favorite-btn" :class="{ active: course.isFavorite }" @tap.stop="toggleFavorite(course)">
            <text class="iconfont" :class="course.isFavorite ? 'icon-heart-fill' : 'icon-heart'"></text>
          </view>
        </view>
      </view>
    </scroll-view>

    <!-- 播放器 -->
    <view class="player-bar" v-if="currentCourse">
      <view class="player-info">
        <image :src="currentCourse.cover" class="player-cover" mode="aspectFill"></image>
        <view class="player-text">
          <text class="player-title">{{ currentCourse.title }}</text>
          <text class="player-status">{{ isPlaying ? '正在播放' : '已暂停' }}</text>
        </view>
      </view>
      <view class="player-controls">
        <view class="control-btn" @tap="togglePlay">
          <text class="iconfont" :class="isPlaying ? 'icon-pause' : 'icon-play'"></text>
        </view>
        <view class="control-btn" @tap="closeCourse">
          <text class="iconfont icon-close"></text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      activeCategory: 'all',
      isPlaying: false,
      currentCourse: null,
      categories: [
        { id: 'all', name: '全部' },
        { id: 'meditation', name: '冥想' },
        { id: 'emotion', name: '情绪疏导' },
        { id: 'breathing', name: '呼吸练习' },
        { id: 'sleep', name: '助眠' }
      ],
      courses: [
        {
          id: 1,
          title: '深度放松冥想',
          description: '通过引导冥想帮助你释放压力，达到深度放松状态',
          category: 'meditation',
          categoryName: '冥想',
          duration: '15:30',
          plays: 1234,
          cover: '/static/course1.jpg',
          isFavorite: false,
          audioUrl: '',
          type: 'audio'
        },
        {
          id: 2,
          title: '焦虑情绪疏导',
          description: '学习如何识别和管理焦虑情绪，重获内心平静',
          category: 'emotion',
          categoryName: '情绪疏导',
          duration: '12:45',
          plays: 987,
          cover: '/static/course2.jpg',
          isFavorite: false,
          audioUrl: '',
          type: 'audio'
        },
        {
          id: 3,
          title: '4-7-8呼吸法',
          description: '掌握科学的呼吸技巧，快速缓解紧张和压力',
          category: 'breathing',
          categoryName: '呼吸练习',
          duration: '8:20',
          plays: 2156,
          cover: '/static/course3.jpg',
          isFavorite: false,
          audioUrl: '',
          type: 'audio'
        },
        {
          id: 4,
          title: '如何管理焦虑情绪',
          description: '焦虑是现代人常见的情绪问题，学会正确的管理方法可以帮助我们更好地应对生活中的挑战',
          category: 'emotion',
          categoryName: '情绪疏导',
          duration: '阅读时间约10分钟',
          plays: 3421,
          cover: '/static/article-cover.jpg',
          isFavorite: false,
          type: 'article'
        },
        {
          id: 5,
          title: '正念冥想入门指南',
          description: '从零开始学习正念冥想，培养专注力和觉察力',
          category: 'meditation',
          categoryName: '冥想',
          duration: '阅读时间约15分钟',
          plays: 2876,
          cover: '/static/article-cover2.jpg',
          type: 'article'
        },
        {
          id: 6,
          title: '睡前放松引导',
          description: '温柔的声音引导你进入深度睡眠',
          category: 'sleep',
          categoryName: '助眠',
          duration: '20:15',
          plays: 1876,
          cover: '/static/course4.jpg',
          isFavorite: true,
          audioUrl: '',
          type: 'audio'
        },
        {
          id: 7,
          title: '正念冥想入门',
          description: '适合初学者的正念冥想练习',
          category: 'meditation',
          categoryName: '冥想',
          duration: '10:30',
          plays: 967,
          cover: '/static/course5.jpg',
          isFavorite: false,
          audioUrl: '',
          type: 'audio'
        }
      ]
    }
  },
  
  computed: {
    filteredCourses() {
      if (this.activeCategory === 'all') {
        return this.courses
      }
      return this.courses.filter(course => course.category === this.activeCategory)
    }
  },
  
  onLoad() {
    this.loadFavorites()
  },
  
  methods: {
    // 切换分类
    switchCategory(categoryId) {
      this.activeCategory = categoryId
    },
    
    // 播放课程
    playCourse(course) {
      // 如果是文章类型，跳转到详情页
      if (course.type === 'article') {
        uni.navigateTo({
          url: `/pages/course/detail?id=${course.id}`
        })
        return
      }
      
      this.currentCourse = course
      this.isPlaying = true
      
      // 增加播放次数
      course.playCount++
      
      // 保存播放记录
      this.savePlayRecord(course)
    },
    
    // 切换播放状态
    togglePlay() {
      this.isPlaying = !this.isPlaying
      console.log(this.isPlaying ? '继续播放' : '暂停播放')
    },
    
    // 关闭课程
    closeCourse() {
      this.currentCourse = null
      this.isPlaying = false
    },
    
    // 切换收藏状态
    toggleFavorite(course) {
      course.isFavorite = !course.isFavorite
      this.saveFavorites()
      
      uni.showToast({
        title: course.isFavorite ? '已收藏' : '已取消收藏',
        icon: 'success'
      })
    },
    
    // 加载收藏状态
    loadFavorites() {
      try {
        const favorites = uni.getStorageSync('course_favorites') || []
        this.courses.forEach(course => {
          course.isFavorite = favorites.includes(course.id)
        })
      } catch (e) {
        console.error('加载收藏失败:', e)
      }
    },
    
    // 保存收藏状态
    saveFavorites() {
      try {
        const favorites = this.courses.filter(course => course.isFavorite).map(course => course.id)
        uni.setStorageSync('course_favorites', favorites)
      } catch (e) {
        console.error('保存收藏失败:', e)
      }
    }
  }
}
</script>

<style scoped>
.course-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  padding-bottom: 200rpx;
}

/* 自定义导航栏 */
.custom-navbar {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
  padding: 88rpx 40rpx 40rpx;
  color: white;
}

.navbar-content {
  text-align: center;
}

.navbar-title {
  font-size: 44rpx;
  font-weight: 600;
  display: block;
  margin-bottom: 10rpx;
}

.navbar-subtitle {
  font-size: 28rpx;
  opacity: 0.9;
}

/* 分类标签 */
.category-tabs {
  display: flex;
  padding: 30rpx;
  background: white;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 20rpx 0;
  border-radius: 12rpx;
  transition: all 0.3s ease;
}

.tab-item.active {
  background: var(--primary-color);
}

.tab-text {
  font-size: 28rpx;
  color: var(--text-secondary);
}

.tab-item.active .tab-text {
  color: white;
  font-weight: 600;
}

/* 课程列表 */
.course-list {
  padding: 30rpx;
  height: calc(100vh - 400rpx);
}

.course-card {
  background: white;
  border-radius: 24rpx;
  margin-bottom: 30rpx;
  overflow: hidden;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.course-card:active {
  transform: scale(0.98);
}

.course-cover {
  position: relative;
  height: 200rpx;
  background: linear-gradient(135deg, var(--accent-color) 0%, var(--warning-color) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cover-image {
  width: 100%;
  height: 100%;
}

.play-btn {
  position: absolute;
  width: 80rpx;
  height: 80rpx;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.play-btn .iconfont {
  font-size: 40rpx;
  color: var(--primary-color);
}

.course-duration {
  position: absolute;
  bottom: 20rpx;
  right: 20rpx;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  padding: 8rpx 16rpx;
  border-radius: 12rpx;
  font-size: 24rpx;
}

.course-info {
  padding: 30rpx;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.course-title {
  font-size: 32rpx;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 10rpx;
}

.course-desc {
  font-size: 28rpx;
  color: var(--text-secondary);
  line-height: 1.4;
  margin-bottom: 20rpx;
}

.course-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.course-category {
  font-size: 24rpx;
  color: var(--primary-color);
  background: var(--bg-secondary);
  padding: 8rpx 16rpx;
  border-radius: 12rpx;
}

.course-plays {
  font-size: 24rpx;
  color: var(--text-tertiary);
}

.course-action {
  position: absolute;
  top: 30rpx;
  right: 30rpx;
}

.favorite-btn {
  width: 60rpx;
  height: 60rpx;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.favorite-btn .iconfont {
  font-size: 32rpx;
  color: var(--text-tertiary);
}

.favorite-btn.active .iconfont {
  color: var(--error-color);
}

/* 播放器 */
.player-bar {
  position: fixed;
  bottom: 100rpx;
  left: 30rpx;
  right: 30rpx;
  background: white;
  border-radius: 20rpx;
  padding: 20rpx;
  display: flex;
  align-items: center;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.15);
  z-index: 1000;
}

.player-info {
  flex: 1;
  display: flex;
  align-items: center;
}

.player-cover {
  width: 80rpx;
  height: 80rpx;
  border-radius: 12rpx;
  margin-right: 20rpx;
  background: var(--bg-secondary);
}

.player-text {
  flex: 1;
}

.player-title {
  font-size: 28rpx;
  color: var(--text-primary);
  display: block;
  margin-bottom: 5rpx;
}

.player-status {
  font-size: 24rpx;
  color: var(--text-tertiary);
}

.player-controls {
  display: flex;
  gap: 20rpx;
}

.control-btn {
  width: 60rpx;
  height: 60rpx;
  background: var(--primary-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.control-btn .iconfont {
  font-size: 28rpx;
  color: white;
}

/* 图标字体 */
.iconfont {
  font-family: 'iconfont';
}

.icon-play::before { content: '▶️'; }
.icon-pause::before { content: '⏸️'; }
.icon-close::before { content: '✖️'; }
.icon-heart::before { content: '🤍'; }
.icon-heart-fill::before { content: '❤️'; }
</style>